<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="libs/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="pub/JSCommonUtil.js"></script>
		<title>jc-duplex</title>
	</head>


	<body>
		<p>view 和 模板相互绑定<p>
		<h2>jc-duplex 用来绑定表单元素</h2>
		<div id="father1">
			
		</div>
		
		<!-- 33{{new Date|filter}}33 -->
		<!-- {{a.b}} -->
		<h3>change value by data</h3>
		jc.th($("#father1")).data().a=<input type="text" id='input1' />


		<h2>根据模板变化渲染模板</h2>
		<div id='father2'>
			
		</div>
		<script type="text/javascript">
		var session={};
		$(function(){
			var data1={a:"value",check:"enable"}
			jc.render(data1,"test_duplex_1",$('#father1'),function(){
				console.log("OK");
				jc.th($("#father1")).bind(data1,function(value,path){
					console.log(path+" change to: "+value)
				})
				$('#input1')[0].addEventListener('input',function(event){
					jc.th($("#father1")).data().a=event.target.value
				})
			})
			var data2={
				select:'1',
				selectData:[{
					key:"1",
					value:"1"
				},{
					key:"2",
					value:"2"
				}],

			}
			jc.render(data2,"test_duplex_2",$('#father2'),function(th){
				// jc.th($("#fahter2")).bind(...)
				th.bind("select",function(value){
					th.reRender("reuse1",{select:value})
				})
				
			})

		})
		</script>
	</body>
</html>